<template>
    <el-upload
            :class="className1"
            :show-file-list="false"
            action="/api/upload_image"
            :http-request="handleUpload"
            :before-upload="beforeImageUpload"
    >
        <!--<img v-if="imgPath && !imageUrl" :src="imgPath" :class="classImg">-->
        <!--<img v-if="imageUrl" :src="imageUrl" :class="classImg">-->
        <!--<i v-if="!imgPath && !imageUrl" class="more-icon el-icon-plus avatar-uploader-icon"></i>-->
        <i  class="more-icon el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>

<script>
    export default{
        data(){
            return {
                imageUrl:'',//图片路径
            }
        },
//        props:['className1','classImg','sequence','imgPath','msg'],
        props:['className1','sequence','imgPath','msg'],

        methods:{
            beforeImageUpload(file) {
//                const isJPG = file.type === 'image/jpeg';
                const imgType = file.type;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (imgType != 'image/jpeg' && imgType != 'image/png') {
                    this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
                }

                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }

                return imgType && isLt2M;
            },
            handleUpload(data){
                let formData = new FormData();
                let _this = this;
                formData.append('image', data.file);

                this.$http.post('/api/upload_image', formData, { emulateJSON: true}).then((response) => {

//                    _this.imageUrl = response.body.data.path;
//
//                     _this.imgPath = '';
                    _this.$emit('imgInfo',response.body.data.id,_this.sequence,_this.msg,response.body.data.path);
            }, (response) => {
                    this.$message.error(response.body.data.msg);

                });
            },
        }

    }
</script>
